<template>
  <a-layout-sider :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
                  style="height: 100% ; overflow:hidden "
                  width="230px"
                  :collapsible="collapsible"
                  v-model="collapsed"
                  :trigger="null">
    <logo />
    <s-menu :collapsed="collapsed"
            :menu="menus"
            :theme="theme"
            :mode="mode"
            @select="onSelect"></s-menu>


    <div class="searchBox">
      <input type="text"
             @input="inout"
             v-model="searchVal">
      <button @click="tofilter">搜索</button>
    </div>


    <a-menu :theme="theme"
            :forceSubMenuRender="true"
            :default-selected-keys="['1']"
            :open-keys.sync="openKeys"
            mode="inline"
            @click="handleClick">

      <!-- <a-sub-menu key="sub2"
                  @titleClick="titleClick">
        <span slot="title">
          <a-icon type="appstore" /><span>Navigation Two</span>
        </span>
        <a-menu-item key="5">
          Option 5
        </a-menu-item>
        <a-menu-item key="6">
          <a href="">6</a>
        </a-menu-item>


        <a-sub-menu key="sub3"
                    title="Submenu"
                    style="max-height: 400px ; overflow:scroll ">
          <a-menu-item key="7">
            Option 7
          </a-menu-item>
          <a-menu-item key="8">
            Option 8
          </a-menu-item>
          <a-menu-item :key="index + 'key'"
                       v-for="(item, index) in menuItemList">
            {{ index }}
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu> -->

      <a-sub-menu :key="index"
                  v-for="(item, index) in  kulist"
                  @titleClick="titleClick">
        <span slot="title">
          <a-icon type="appstore" /><span>{{ item.dbName }}</span>
        </span>
        <a-menu-item :key="lidex"
                     v-for="(li, lidex) in item.list ">
          {{ li.tableCnName }}
        </a-menu-item>


        <!-- <a-sub-menu key="sub5"
                    title="Submenu"
                    style="max-height: 400px ; overflow:scroll ">
          <a-menu-item key="7">
            Option 7
          </a-menu-item>
          <a-menu-item key="8">
            Option 8
          </a-menu-item>
          <a-menu-item :key="index + 'key'"
                       v-for="(item, index) in menuItemList">
            {{ index }}
          </a-menu-item>
        </a-sub-menu> -->
      </a-sub-menu>


    </a-menu>
  </a-layout-sider>

</template>

<script>
import Logo from '@/components/tools/Logo'
import SMenu from './index'
import { eventBus } from '../../utils/eventBus/eventBus.js'
import { mixin, mixinDevice } from '@/utils/mixin'
// import { axios } from '@/utils/request'
let mod = () => import('@/utils/request')



// const { tableFieldPage, tableFieldList}
// let tempm = () => import('../../api/modular/main/tablefield/tableFieldManage')

export default {
  data() {
    return {
      current: ['mail'],
      openKeys: ['sub1'],
      menuItemList: [{ cloumnRemarks: '123' }, { cloumnRemarks: '1333' }],
      kulist: [{ dbName: '加载中' }],
      kulisttemp:[],
      searchVal: ''

    };
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val);
    },
  },
  name: 'SideMenu',
  components: { Logo, SMenu },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    }
  },
  methods: {
    onSelect(obj) {
      console.log(111)
      this.$emit('menuSelect', obj)
    },
    tofilter(){
       console.log(this.searchVal,this.kulisttemp.list)
     
       this.kulist[0].list=this.kulisttemp.list.filter((it)=>{
         it=it.tableCnName
         console.log(it.indexOf(this.searchVal))
         return it.indexOf(this.searchVal)!=-1
       })
    },

    handleClick(e) {
      console.log('click', e.keyPath,e,this.kulist[e.keyPath[1]].list[e.keyPath[0]]);
        this.axio({
          url: 'tableField/page?pageNo=1&pageSize=40&tableId='+this.kulist[e.keyPath[1]].list[e.keyPath[0]].tableCnName,
          method: 'get',
          params: ''
        }).then(
          res => {
            console.log('outfind', res)
            eventBus.$emit('change',res.data)
          }
        )

      console.log(this.$router.options.routes)
      console.log(eventBus),
      // eventBus.$emit('change',e)


      this.$router.push('tableField')

    },
    inout(e) {
      console.log(e, this.searchVal)
    },
    titleClick(e) {
      console.log('titleClick', e);
    },
  },
  mounted() {
    console.log(this.$props.menus)
    const a = () => {
      const templist = []
      let index = -1
      this.$props.menus.forEach((element, idx) => {
        if (templist.indexOf(element.name) === -1) {
          templist.push(element.name)
        } else {
          index = idx
        }
      })
      if (index !== -1) { this.$props.menus.splice(index, 1) }
    }

    //生成自己的菜单的尝试
    a()
    const temp = {
      meta: {
        target: null,
        title: 'TestMenue'
      },
      name: 'test123',
      path: 'selectPage'
    }
    this.$props.menus.push(temp)

    //  请求库的数据
    setTimeout(() => {
      console.log(mod())
      mod().then(res => {
        console.log(res)
        let parameter = ''
        this.axio= res.axios
        res.axios({
          url: '/tableField/page',
          method: 'get',
          params: { pageNo: 10 }
        }).then(
          res => {
            console.log('/tableField/page', res)
          }
        )
        res.axios({
          url: '/tableInfo/page',
          method: 'get',
          params: { pageNo: 10 }
        }).then(
          res => {
            console.log('/tableInfo/page', res)
          }
        )
        res.axios({
          url: '/tableInfo/list',
          method: 'get',
          params: ''
        }).then(
          res => {
            console.log('/tableInfo/list', res)
          }
        )


        res.axios({
          url: '/tableField/list',
          method: 'get',
          params: ''
        }).then(
          res => {
            console.log('/tableField/list', res)
            this.menuItemList = res.data
          }
        )

        res.axios({
          url: '/databaseInfo/page',
          method: 'get',
          params: parameter
        })
          .then(res => {
            console.log('/databaseInfo/page', res)
            return res
          })


        //生成目录
        res.axios({
          url: '/databaseInfo/list',
          method: 'get',
          params: parameter
        }).then(res => {
          console.log('/databaseInfo/list 数据库', res)
          return res
        })
          .then(res => {
            this.kulist = res.data
            console.log('kulist', this.kulist)
          })
          .then(() => {
            return res.axios({
              url: '/tableInfo/list',
              method: 'get',
              params: ''
            })
          })
          .then(
            res => {
              console.log('/tableInfo/list 表', res)
              this.kulist.forEach(item => {
                item.list = []
                res.data.forEach(it => {
                  if (item.id == it.databaseId) {
                    // console.log(item.id == it.databaseId,item.id ,it.databaseId)
                    item.list.push(it)
                  }
                })
                console.log('库表zong', item.list)
              })
               this.kulisttemp.list=this.kulist[0].list
            }
           
          )

        // res.axios({
        //   url: '/databaseInfo/Tb',
        //   method: 'get',
        //   params: parameter
        // }).then(res => {
        //   console.log('/databaseInfo/Tb', res)
        //   return res
        // })

        // res.axios({
        //   url: '/databaseInfo/Table',
        //   method: 'get',
        //   params: parameter
        // }).then(res => {
        //   console.log('/databaseInfo/Table', res)
        //   return res
        // })






      })



    }, 2000)
        
  }
}
</script>

<style>
.searchBox {
  display: flex;
}

.searchBox button {}
</style>